<template>
    <div class="flow-leave-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="leaveDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">
                <el-row :gutter="35">
                    <!-- <el-col :span="12" class="mb20">
                        <el-form-item label="请假类型" prop="type">
                            <el-input v-model="state.ruleForm.type" placeholder="请输入请假类型" clearable></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="24" class="mb20">
                        <el-form-item label="请假原因" prop="reason">
                            {{ state.ruleForm.reason }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="mb20">
                        <el-form-item label="请假时间" prop="dateRange">
                            {{ state.ruleForm.startTime + ' 至 ' + state.ruleForm.endTime }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mb20">
                        <el-form-item label="请假天数" prop="day">
                            {{ state.ruleForm.day }}
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12" class="mb20">
                        <el-form-item label="结束时间" prop="endTime">
                            <el-input v-model="state.ruleForm.endTime" placeholder="请输入结束时间" clearable></el-input>
                        </el-form-item>
                    </el-col> -->
                    <!-- 
                    <el-col :span="12" class="mb20">
                        <el-form-item label="流程实例的id" prop="instanceId">
                            <el-input v-model="state.ruleForm.instanceId" placeholder="请输入流程实例的id" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mb20">
                        <el-form-item label="节点编码" prop="nodeCode">
                            <el-input v-model="state.ruleForm.nodeCode" placeholder="请输入节点编码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mb20">
                        <el-form-item label="流程节点名称" prop="nodeName">
                            <el-input v-model="state.ruleForm.nodeName" placeholder="请输入流程节点名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mb20">
                        <el-form-item label="节点类型" prop="nodeType">
                            <el-select v-model="state.ruleForm.nodeType" placeholder="请选择节点类型" clearable>
                                <el-option
                                        v-for="dict in nodetypeDict"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>  -->
                </el-row>
                <el-form-item label="跳转节点" prop="newNodeCode" v-if="showAnyNode">
                    <el-select v-model="state.ruleForm.newNodeCode" placeholder="请选择跳转节点">
                        <el-option
                        v-for="dict in state.anyNode"
                        :key="dict.nodeCode"
                        :label="dict.nodeName"
                        :value="dict.nodeCode"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-divider v-if="state.showApprovalFields"></el-divider>
                <el-form-item label="审批意见" prop="message" v-if="state.showApprovalFields">
                    <el-input v-model="state.ruleForm.message" type="textarea" placeholder="请输入审批意见" :autosize="{ minRows: 4, maxRows: 4 }" />
                </el-form-item>
            </el-form>
            <template #footer>
				<span class="dialog-footer" v-if="state.showApprovalFields">
					<el-button type="primary" @click="handleBtn('PASS')">审批通过</el-button>
                    <el-button @click="handleBtn('REJECT')">退回</el-button>
                    <el-button @click="rejectLast" v-if="!showAnyNode">驳回到上一个任务</el-button>
                    <el-button @click="taskBack" v-if="!showAnyNode">拿回</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="flowLeaveDialogApprove">
    import constConfig from '/@/utils/constConfig';
    import { leaveApi } from '/@/api/biz/flow/leave';
    import { anyNodeList } from "/@/api/flow/execute";

    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);
    const { proxy } = <any>getCurrentInstance();

    const props = defineProps({
        /* 业务id */
        value: {
        type: String,
        default: "",
        },

        /* 实例id */
        taskId: {
        type: String,
        default: "",
        },

        /* 是否可以标编辑 */
        disabled: {
        type: Boolean,
        default: false,
        },

        /* 是否显示任意任意跳转选择框 */
        showAnyNode: {
        type: Boolean,
        default: false,
        },

        /* 传递的infoVo数据 */
        infoVo: {
        type: Object,
        default: () => ({}),
        },
    });

    // 定义变量内容
    const leaveDialogFormRef = ref();
    const state = reactive({
        ruleForm: {} as LeaveType,
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
        showApprovalFields: true,
        anyNode: [] as any,
   
        disabled: false
    });

    // 打开弹窗
    const openDialog = (type: string, id: string) => {
        if (id) {
            leaveApi().get(id).then((res: any) => {
                state.ruleForm = res.data;
                if (props.showAnyNode) {
                anyNodeList(state.ruleForm.instanceId).then(response => {
                    if (response.data) {
                        state.anyNode = response.data;
                    }
                });
                }
            });
        }
        
        state.dialog.type = type;
        state.dialog.isShowDialog = true;
        state.disabled = false;
        if (type === '20') {
            state.dialog.title = 'OA请假跳转';
        } else if (type === '50') {
            state.dialog.title = 'OA请假详情';
            state.showApprovalFields = false;
        } else {
            state.dialog.title = 'OA请假审批';
            state.disabled = true;
        }
        nextTick(() => {
            leaveDialogFormRef.value.clearValidate();
        });
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    const handleBtn = (skipType: string) => {
        leaveDialogFormRef.value.validate((valid: boolean) => {
            if (valid) {
                state.ruleForm.skipType = skipType;
                state.ruleForm.taskId = props.taskId;
                leaveApi().handle(state.ruleForm).then(response => {
                    proxy.modal.msgSuccess("办理成功");
                    emit('refresh');
                    closeDialog();
                });
            }
        });
    }
    const rejectLast = () => {
      leaveDialogFormRef.value.validate((valid: boolean) => {
        if (valid) {
            state.ruleForm.taskId = props.taskId;
          leaveApi().rejectLast(state.ruleForm).then(response => {
            proxy.$modal.msgSuccess("驳回到上一个任务成功");
            emit('refresh');
            closeDialog();
          });
        }
      });
    }
    const taskBack = () => {
      leaveDialogFormRef.value.validate((valid: boolean) => {
        if (valid) {
            state.ruleForm.taskId = props.taskId;
          leaveApi().taskBack(state.ruleForm).then(response => {
            proxy.modal.msgSuccess("拿回到最近办理的任务");
            emit('refresh');
            closeDialog();
          });
        }
      });
    }

    // 暴露变量
    defineExpose({
        openDialog,
    });
</script>
